<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    清除浮动：
        让浮动的子元素可以撑开父级的高度

        1、直接给父级加高度
        2、通过开启bfc
            浮动盒子和定位盒子的高宽都由内容撑开
        3、br标签清浮动<br clear="all"/>
        4、空标签清浮动<div style="clear:both;"></div>
    -->
    <!--
    bfc什么时候会出现（哪些元素会生成bfc）
        根元素
        float属性值不为none
        position为absolute或fixed
        overflow不为visible
        display为inline-block,table-cell,table-caption,flex,inline-flex
    -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            border: 1px solid;
            /*overflow: hidden;*/
            /*position: absolute;*/
            /*float: left;*/
        }
        #inner {
            float: left;
            width: 200px;
            height: 200px;
            background: pink;
        }

        .clear-fix {
            /*ie67 开启haslayout*/
            *zoom: 1;
        }
        /*ie67不支持伪元素*/
        .clear-fix:after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="wrap" class="clear-fix">
        <div id="inner">

        </div>
<!--        <br clear="all"/>-->
        <!--<div style="clear: both;"></div>-->
    </div>
</body>
</html>
